<template>
  <div>
    <!-- 顶部导航 -->
    <van-nav-bar
      title="商品详情页"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- 轮播 -->
    <van-swipe :autoplay="3000" class="broadcast">
      <van-swipe-item v-for="(item, index) in goodsImage" :key="index">
        <img v-lazy="item.external_url" />
      </van-swipe-item>
    </van-swipe>
    <!-- 商品信息 -->
    <div class="goods_message">
      <div class="price">
        <span>￥{{ goodsMessage.goods_price_min }}</span>
        <del>￥{{ goodsMessage.line_price_min }}</del>
      </div>
      <div class="sold">
        已售{{ goodsMessage.goods_sales }}件
      </div>
    </div>
    <!-- 商品名字 -->
    <div class="goods_name" style="padding:10px">
      {{ goodsMessage.goods_name }}
    </div>
    <!-- 服务 -->
    <div class="serve" @click="show = !show">
      <div class="left">
        <van-icon name="success" />7天无理由退货
        <van-icon name="success" />48小时发货
      </div>
      <div class="right">
        >
      </div>
    </div>
    <van-action-sheet v-model="show" title="服务">
      <div class="content">
        <van-icon name="success" />7天无理由退货
        <van-icon name="success" />48小时发货
      </div>
    </van-action-sheet>
    <!-- 商品评价 -->
    <div class="goods_evaluate">
      <div class="top">
        <p>商品评价(14条)</p>
        <span>查看更多></span>
      </div>
      <base-goods-evaluate v-for="item in goodsComment" :key="item.comment_id" :item="item"></base-goods-evaluate>
    </div>
    <!-- 商品描述 -->
    <!-- <div class="goods_describe" v-html="goodsMessage.content">

    </div> -->
    <!-- 底部固定导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="首页" @click="$router.push('/')" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/cart')" />
      <van-goods-action-button color="#be99ff" text="加入购物车" @click="pop('加入购物车')"/>
      <van-goods-action-button color="#7232dd" text="立即购买" @click="pop('立即购买')"/>
      <span v-if="cartNum > 0">{{ cartNum }}</span>
    </van-goods-action>

    <!-- 加入购物车与立即购买的弹窗 -->
    <van-action-sheet v-model="isShow" :title="pop_title">
      <div class="content">
        <div class="top">
          <img :src="goodsMessage.goods_image">
          <div>
            <p>￥<span>{{ goodsMessage.goods_price_min }}</span></p>
            <p>库存{{ goodsMessage.stock_total }}</p>
          </div>
        </div>
        <div class="middle">
          <p>数量</p>
          <count-goods v-model="buyNum"></count-goods>
        </div>
        <div class="footer_1" v-if="goodsMessage.stock_total > 0">
          <!-- 加入购物车 || 立即购买 -->
          <button @click="addCarts" v-if="pop_title === '加入购物车'">{{ pop_title }}</button>
          <button @click="buyNow" v-else>{{ pop_title }}</button>
        </div>
        <div class="footer_2" v-else>
          <button disabled>无库存</button>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import BaseGoodsEvaluate from '@/components/BaseGoodsEvaluate.vue'
import { getGoodsDetails, getGoodsComment } from '@/api/goodsDetails'
import CountGoods from '@/components/CountGoods.vue'
import { addCart } from '@/api/cart.js'
import confirmLogin from '@/mixins/confirmLogin'
export default {
  components: { BaseGoodsEvaluate, CountGoods },
  mixins: [confirmLogin],
  data () {
    return {
      show: false, // 七天无理由退货弹窗
      isShow: false, // 加入购物车与立即购买的弹窗
      pop_title: '', // 加入购物车与立即购买的弹窗的标题
      buyNum: 1, // 加入购物车的商品数量
      goodsImage: [], // 轮播图地址
      goodsMessage: [], // 所有商品信息
      goodsComment: [], // 三条临时展示评论信息
      cartNum: 0 // 用户购物车里的商品数量
    }
  },
  created () {
    // 获取并存储所有商品信息
    this.getGoodsDetails()
    // 获取并存储所有评论信息
    this.getGoodsComment()
  },
  methods: {
    onClickIcon () {
      this.$toast('点击图标')
    },
    pop (txt) {
      this.isShow = true
      this.pop_title = txt
    },
    // 获取并存储所有商品信息
    async getGoodsDetails () {
      const { data: { detail } } = await getGoodsDetails(this.$route.params.id)
      this.goodsImage = detail.goods_images
      console.log(detail)
      this.goodsMessage = detail
    },
    // 获取并存储所有评论信息
    async getGoodsComment () {
      const { data: { list } } = await getGoodsComment(this.$route.params.id, 3)
      this.goodsComment = list
      // console.log(list)
    },
    // 加入购物车
    async addCarts () {
      if (!this.confirmLogin()) return
      // 向后台发送加入购物车请求
      const { data } = await addCart(this.goodsMessage.goods_id, this.buyNum, this.goodsMessage.skuList[0].goods_sku_id)
      this.cartNum = data.cartTotal
      // 关闭加入购物车弹窗
      this.isShow = false
      this.$toast('加入购物车成功')
      console.log(this.cartNum)
    },
    // 立即购买
    async buyNow () {
      if (!this.confirmLogin()) return
      this.$router.push({
        path: '/pay',
        query: {
          mode: 'buyNow',
          goodsId: this.goodsMessage.goods_id,
          goodsNum: this.buyNum,
          goodsSkuId: this.goodsMessage.skuList[0].goods_sku_id
        }
      })
    }
  }
}
</script>

<style scoped>
/* 轮播 */
.broadcast img {
  height:380px;
}
/* 商品信息 */
.goods_message {
  padding:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.goods_message .price {
  display:flex;
  align-items:center;
}
.goods_message .price span{
  color:red;
  font-size:26px;
}
.goods_message .price del {
  opacity:0.5;
  margin-left:5px;
}
/* 服务 */
.content {
    padding: 16px 16px 160px;
}
.serve {
  padding:10px;
  display:flex;
  justify-content:space-between;
}
/* 商品评价 */
.goods_evaluate {
  padding:10px;
}
.goods_evaluate .top{
  display:flex;
  justify-content:space-between;
}
.goods_evaluate .top span {
  font-size:12px;
  opacity:0.5;
}
/* 商品描述 */

/* 加入购物车与立即购买的弹窗 */
.content {
  padding:10px;
}
.content .top{
  display:flex;
}
.content .top img {
  width:80px;
  height:80px;
}
.content .top p:first-child {
  color:orange
}
.content .top p:first-child span {
  font-size:30px;
}
.content .top div {
  margin-left:10px;
}

.content .middle {
  display:flex;
  justify-content:space-between;
  margin:25px 0;
}

.content .footer_1 button{
  width:100%;
  height:50px;
  line-height:50px;
  text-align: center;
  background:orange;
  color:white;
  border-radius:50px;
  border:none;
}
.content .footer_2 button {
  width:100%;
  height:50px;
  line-height:50px;
  text-align: center;
  background:gray;
  color:white;
  border-radius:50px;
  border:none;
}
/* 底部固定导航 */
.van-goods-action span {
  position:absolute;
  top:6px;
  left:70px;
  display:inline-block;
  width:15px;
  height:15px;
  background:red;
  border-radius:50%;
  text-align: center;
  line-height: 15px;
  font-size:10px;
}
</style>
